<template>
  <div>
    <el-row>
      <el-col :span="24">
        <dy-panel>
          <dy-panel-header title="角色管理"></dy-panel-header>
          <el-row>
            <el-col :span="24">
              <dy-panel-body>
                <el-row>
                  <el-form :inline="true" class="demo-form-inline">


                    <el-form-item label="关键字">
                      <el-input
                        v-model="queryParam.searchKey"
                        placeholder="请输入账号名称"
                        @change="doSearchList"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="doSearchList">查询</el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
              </dy-panel-body>
              <dy-panel-body v-loading="loading">
                <el-table
                  @selection-change="onSelectRowEvent"
                  :data="tableList"
                  border
                  style="width: 100%;text-align: center"
                  @sort-change="onSortTableEvent"
                >
                  <el-table-column
                    type="selection"
                    prop="date"
                    label="序号"
                    width="60"
                    align="center"
                  ></el-table-column>
                  <el-table-column prop="account" label="登录账号" align="center" width="180"></el-table-column>
                  <el-table-column prop="username" label="用户名" align="center" width="180"></el-table-column>
                  <el-table-column prop="loginBrowser" label="浏览器" align="center" width="180"></el-table-column>
                  <el-table-column prop="loginIp" label="登录IP" align="center" width="120"></el-table-column>
                  <el-table-column prop="loginOs" label="登录系统" align="center" width="180"></el-table-column>
                  <el-table-column prop="loginSource" label="来源" align="center" width="120"></el-table-column>
                  <el-table-column prop="loginTime" class="text-line-1" label="登录时间" align="center"></el-table-column>
                  <el-table-column prop="id" label="操作" width="160">
                    <template slot-scope="scope">
                      <el-link
                        style="margin-right: 10px"
                        @click="onRejectRowEvent(scope.row)"
                        type="primary"
                      >强制退出
                      </el-link>
                      <!--  <el-link style="margin-right: 10px" type="primary">重置密码</el-link>-->
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <dy-pagination
                    :current-page.sync="queryParam.currentPage"
                    :page-size.sync="queryParam.pageSize"
                    @click="doSearchList"
                    :total="tableTotal"
                  ></dy-pagination>
                </div>
              </dy-panel-body>
            </el-col>
          </el-row>
        </dy-panel>
      </el-col>
    </el-row>
    <el-row>
    </el-row>
  </div>
</template>
<script>
  import {DyPanel, DyPanelHeader} from '@/view/panel'
  import DyPanelBody from '@/view/panel/DyPanelBody'
  import authTbUserLoginLogApi from '@/apis/authApp/authTbUserLoginLogApi.js'
  import authTbUserApi from '@/apis/authApp/authTbUserApi.js'

  import DyPagination from '@/components/pagination/DyPagination.vue'

  export default {
    components: {
      DyPanelBody,
      DyPanel,
      DyPanelHeader,
      DyPagination
    },
    data () {
      return {
        /**
         * 编辑弹出框
         */
        editModal: {
          formKey: 'user-update',
          readOnly: false,
          data: {},
          visible: false
        },
        loading: true,
        /**
         * 查询参数
         */
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        /**
         * 上方操作按钮
         */
        operateBtn: {
          addBtn: true,
          editBtn: false,
          delBtn: true,
          importBtn: true,
          exportBtn: true
        },
        /**
         * 已选中的行
         */
        selectRows: [],
        deptFilter: '',
        roleList: [],
        deptList: [],
        deptProps: {
          children: 'children',
          label: 'deptName'
        },
        tableTotal: 0,
        tableList: []
      }
    },
    created () {
      this.doSearchList()
    },

    methods: {
      onRejectRowEvent (row) {
        this.$confirm('您确定强制退出该用户吗？', '退出警告', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(() => {
          authTbUserApi.rejectUser({account: row.account}).then((msg) => {
            this.onRefresh(true)
          })
        })
      },
      onRefresh () {
        this.doSearchList()
      },
      /**
       * 查询列表业务处理
       */
      doSearchList () {
        this.loading = true
        authTbUserLoginLogApi.selectOnlineUserList(this.queryParam).then(msg => {
          setTimeout(() => {
            this.tableList = msg.rows
            this.tableTotal = msg.total
            this.queryParam.currentPage = msg.currentPage
          }, 200)
        }).finally(() => {
          this.loading = false
        })
      }
    },
    computed: {},
    watch: {
      deptFilter (val) {
        this.$refs.tree.filter(val)
      }
    }
  }
</script>
